<template>
  <div v-permission="['home.newPersonalSettings.accountPassword.see']">
    <base-search :title="t('keys.account_management')" :isShowSearch="1"> </base-search>
    <el-row class="contract_base_title">
      {{ t('keys.account_management')
      }}<el-tooltip class="box-item" effect="light" :content="t('keys.account_management_tips')" placement="top">
        <i class="icon zcb-icon zcb zcbquestion" style="cursor: pointer"></i> </el-tooltip
    ></el-row>
    <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm" label-position="left">
      <el-row :gutter="60">
        <el-col :span="10" v-if="ruleForm.userType == 'DOMESTIC'">
          <el-form-item :label="t('keys.address_tel')" prop="phone" class="pofixd">
            <el-input
              v-model="ruleForm.phone"
              :placeholder="t('keys.pleaseEnter')"
              maxlength="11"
              oninput="value=value.replace(/[^\d]/g,'')"
              disabled
              style="width: 60%;position: relative;"
            ></el-input>
            <span class="updata" @click="handelUpdata('updata', 'phone')">{{ t('keys.Amend') }}</span>
            <span class="goverify" @click="handelUpdata('verify', 'phone')" v-if="!ruleForm?.phoneCheckedFlag">{{ t('keys.to_verify') }}</span>
            <span v-else class="verifiedok">{{ t('keys.verified') }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="10" v-else>
          <el-form-item :label="'企业' + t('keys.email')" prop="email" class="pofixd">
            <el-input
              v-model="ruleForm.email"
              :placeholder="t('keys.pleaseEnter')"
              maxlength="60"
              style="width: 60%;position: relative;"
              disabled
            ></el-input>
            <span class="updata" @click="handelUpdata('updata', 'email')">{{ t('keys.Amend') }}</span>
            <span class="goverify" @click="handelUpdata('verify', 'email')" v-if="!ruleForm?.emailCheckedFlag">{{ t('keys.to_verify') }}</span>
            <span v-else class="verifiedok">{{ t('keys.verified') }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="contract_base_title" v-if="ruleForm.userType == 'DOMESTIC'">
        {{ t('keys.Employee_mailbox')
        }}<el-tooltip class="box-item" effect="light" :content="t('keys.Employee_mailbox_tips')" placement="top">
          <i class="icon zcb-icon zcb zcbquestion" style="cursor: pointer"></i> </el-tooltip
      ></el-row>
      <el-row :gutter="60" v-if="ruleForm.userType == 'DOMESTIC'">
        <el-col :span="10" v-for="(item, index) in ruleForm.empList" :key="index">
          <el-form-item :label="`${item?.empName || ''}${t('keys.demailbox')}`" prop="empEmail">
            <el-input v-model="item.empEmail" :placeholder="t('keys.pleaseEnter')" disabled style="width: 60%;position: relative;"></el-input>
            <span class="verifiedok" v-if="item?.empEmailCheckedFlag">{{ t('keys.verified') }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="60">
        <el-col class="contract_base_title" :span="24">{{ t('keys.password_management') }}</el-col>
        <el-col :span="10">
          <el-form-item :label="t('keys.password')" prop="password">
            <el-input v-model="ruleForm.password" :placeholder="t('keys.pleaseEnter')" disabled type="password" style="width: 60%"></el-input>
            <span class="updata" @click="handelUpdataPassword">{{ t('keys.Amend') }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <updata-phone-dialog ref="updataPhoneRef" @refresh="getUserInfo()"></updata-phone-dialog>
    <updata-password-dialog ref="updataPasswordRef" :detailInfo="ruleForm" @refresh="getUserInfo()"></updata-password-dialog>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { ERR_OK } from 'config/statusCode'
import { getUserInfoApi, empMineListApi, getEmailValidateApi } from 'api/home'
import updataPhoneDialog from './components/updataPhoneDialog.vue'
import updataPasswordDialog from './components/updataPasswordDialog.vue'

const { t } = useI18n() // 中英文
const updataPhoneRef = ref()
const updataPasswordRef = ref()
const ruleForm = ref({
  userType: 'DOMESTIC',
  phone: '',
  phoneCheckedFlag: false,
  email: '',
  emailCheckedFlag: false,
  empList: [{ email: '', emailCheckedFlag: false }],
  password: '********'
})
// 获取用户信息
const getUserInfo = async () => {
  const { code, data } = await getUserInfoApi({}, JSON.parse(localStorage.getItem('userinfo'))['userId'])
  if (code === ERR_OK) {
    ruleForm.value.userType = data.userType || ''
    ruleForm.value.phone = data.phone || ''
    ruleForm.value.phoneCheckedFlag = data.phoneCheckedFlag || ''
    ruleForm.value.email = data.email || ''
    ruleForm.value.emailCheckedFlag = data.emailCheckedFlag || ''
  }
  if (ruleForm.value.userType == 'DOMESTIC') {
    const res = await empMineListApi()
    if (res.code === ERR_OK) {
      ruleForm.value.empList = res.data || []
    }
  }
}

getUserInfo()

// 编辑
const handelUpdata = (type, sourType) => {
  if (type == 'verify' && sourType == 'email') {
    // 邮箱验证
    getEmailValidate()
  } else {
    updataPhoneRef.value.showDialog(type, sourType, ruleForm.value)
  }
}
const getEmailValidate = () => {
  const { code } = getEmailValidateApi()
  ElMessageBox.alert(t('keys.mail_sent'), t('keys.mailbox_verification'), {
    confirmButtonText: t('keys.ok'),
    showClose: 'false',
    callback: (action) => {
      // ElMessage({
      //   type: 'success',
      //   message: `邮件发送成功`
      // })
    }
  })
}
// 修改密码
const handelUpdataPassword = () => {
  updataPasswordRef.value.showDialog()
}
</script>
<style lang="scss" scoped>
.goverify {
  position: absolute;
  top: 0;
  right: 41%;
  color: var(--el-color-primary-light-5);
  cursor: pointer;
}
.verifiedok {
  margin-left: 10px;
  color: var(--el-color-primary-light-5);
  color: #76f555;
}
.updata {
  color: var(--el-color-primary-light-5);
  margin-left: 10px;
  cursor: pointer;
}
.verified {
  color: #76f555;
}
</style>
